<template>
  <div id="total">
    <div id="top">
      <div id="left">
        <div>
          <el-form-item id="zhidan" prop="username" label="患者姓名:">
            <el-input
              v-model="searchData.bankName"
              placeholder="请输入患者姓名"
            />
          </el-form-item>
          <el-form-item id="zhidan" prop="bankName" label="挂号日期:">
              <el-date-picker
        v-model="searchData.startTime"
        type="date"
        placeholder="开始日期"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
      &nbsp;-&nbsp;
      <el-date-picker
        v-model="searchData.endTime"
        type="date"
        placeholder="结束日期"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
            </el-form-item>
        </div>
        <div id="require">
          <el-button type="primary" @click="returnFn()">查询</el-button>
        </div>
      </div>
      <div id="right">
      </div>
    </div>
    <!-- 表单 -->
    <div id="bottom">
      <div id="form">
        <el-table :data="getTreatedData" style="width: 100%">
          <el-table-column align="center" prop="id" label="序号" width="100" />
          <el-table-column
            align="center"
            prop="patientBankRef.bankName"
            label="患者姓名"
            width="180"
          />
          <el-table-column
            align="center"
            prop="patientBankRef.sex"
            label="性别"
            width="120"
          />
          <el-table-column
            align="center"
            prop="patientBankRef.age"
            label="年龄"
            width="150"
          />
          <el-table-column
            align="center"
            prop="patientBankRef.phone"
            label="电话"
            width="130"
          />
          <el-table-column
            align="center"
            prop="recordsRef.recordsTime"
            label="就诊时间"
            width="120"
          />
          <el-table-column
            align="center"
            label="挂号类型"
            width="200"
          />
          <el-table-column
            align="center"
            label="支付状态"
            width="120"
          >
          <template #default="scope">
            <span v-if="scope.row.status==0">未支付</span>
            <span v-if="scope.row.status==1">已支付</span>
          </template>
        </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div id="pager-wapper">
        <el-pagination
          :page-sizes="[2, 3, 5, 10]"
          id="paging"
          background
          layout="prev, pager, next"
          v-model:page-size="pageSize"
          :total="Istore.state.treatList.treatedTableTotal"
          @current-change="pageChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, defineComponent, computed, onBeforeMount } from "vue";
import { mapMutations, mapGetters, useStore } from "vuex";
const Istore = useStore();
// 默认展示数据
// 展示默认数据
const getTreatedData = computed(
  mapGetters(["getTreatedData"]).getTreatedData.bind({
    $store: Istore,
  })
);

// 分页
const setTreatedData = mapMutations([
      "setTreatedData",
    ]).setTreatedData.bind({
      $store: Istore,
    });
onBeforeMount(() => {
  setTreatedData({ currentPage: 1, pageSize: pageSize.value });
});
// 分页功能实现
const pageChange = (currentPage: any) => {
  setTreatedData({ currentPage: currentPage, pageSize: pageSize.value,bankName:searchData.bankName,
      startTime:searchData.startTime,
      endTime:searchData.endTime });
};

const formLabelWidth = "100px";
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
const form1 = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

// 查询输入框
const searchData = reactive({
  bankName: null,
  startTime: null,
  endTime: null
});

const pageSize = ref(10);
const returnFn = () => {
  setTreatedData({
      currentPage: 1,
      pageSize: pageSize.value,
    bankName:searchData.bankName,
      startTime:searchData.startTime,
      endTime:searchData.endTime
    });
};

  //输入框为空时重新拿取数据
  const setData=computed(()=>{
    if(!searchData.bankName){
      setTreatedData({
      currentPage: 1,
      pageSize: pageSize.value
    });
    }
  });

const dialogFormVisible = ref(false);
const dialogFormVisible1 = ref(false);
</script>
<style scoped>
#top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
#left {
  display: flex;
  align-items: center;
  margin: 20px 0;
  height: 50px;
}
#left > div {
  margin-left: 20px;
}
#right {
  border: red solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#red {
  color: red;
}
#middle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1100px;
   ;
  height: 40px;
}
#middle > div {
  margin-left: 20px;
}
#pager-wapper {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pager-wapper > .el-pagination {
   
  justify-content: center;
  align-items: center;
}
#zhidan {
  display: flex;
  margin-top: 20px;
   ;
}
#require {
  display: flex;
}
#inputOne {
  width: 50px;
}
.el-form-item > div {
  display: flex;
}
#inputOne {
  width: 300px;
}
#inputTwo {
  width: 300px;
}
#Notice {
  display: flex;
  align-items: center;
  justify-content: center;
}
#NoticeTwo {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

</style>
